<template>
  <div class="menus-manage">
    <!-- 面包屑 -->
    <div class="bread-crumbs">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item :to="{ path: '/home/prolist' }">项目列表</el-breadcrumb-item>
        <el-breadcrumb-item :to="{ path: '/home/prolist/proinfo' }">{{proinfo.proNo}}</el-breadcrumb-item>
        <el-breadcrumb-item>费用信息</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="main-middle">
      <el-card class="box-card">
        <!-- 费用信息 -->
        <div class="card-title">费用信息</div>
        <el-form label-width="100px" :model="money" :rules="moneyRules" ref="money">
          <el-row :gutter="24">
            <el-col :span="12">
             <!-- 费用类型 -->
              <el-form-item label="费用类型" prop="type">
                <el-select v-model="money.type" filterable style="width:100%">
                    <el-option
                      v-for="item in options"
                      :key="item.value"
                      :label="item.label"
                      :value="[item.value, item.label]">
                    </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="费用周期" prop="costCycle">
                <el-date-picker
                  v-model="money.costCycle"
                  style="width:100%"
                  type="daterange"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                ></el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <!-- 费用信息 -->
              <el-form-item label="费用金额" prop="cost">
                 <el-input placeholder="请输入具体金额" v-model="money.cost" onkeyup="value=value.replace(/^\D*(\d*(?:\.\d{0,2})?).*$/g, '$1')">
                  <template slot="prepend">￥</template>
                  <template slot="append">元</template>
                </el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <!-- 备注说明 输入长度限制20-->
          <el-form-item label="备注说明" prop="note">
            <el-input
              type="textarea"
              placeholder="备注说明（20字以内）"
              :rows="3"
              maxlength="20"
              v-model="money.note"
            ></el-input>
          </el-form-item>
        </el-form>
        <div class="card-line">
          <!-- 立即修改 -->
          <el-button
            type="primary"
            size="small"
            @click="onEdit"
            v-if="isEdit"
            :disabled="isSubmit"
          >立即修改</el-button>
          <el-button
            type="primary"
            size="small"
            @click="onSubmit"
            v-if="!isEdit"
            :disabled="isSubmit"
          >立即申请</el-button>
          <!-- 返回 -->
          <el-button size="small" style="float:right" @click="goBack">返回</el-button>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script>

export default {
  // 当前实例数据
  data () {
    return {
      // 是否修改
      isEdit: false,
      // 防止重复提交
      isSubmit: false,
      // 项目费用
      money: {
        // 费用金额
        cost: '',
        // 费用类型
        type: '',
        // 费用周期
        costCycle: [],
        // 备注说明
        note: ''
      },

      options: [{
        value: 'XSE',
        label: '预计销售额'
      }, {
        value: 'KH',
        label: '客户交际费用'
      }, {
        value: 'CL',
        label: '差旅费用'
      }, {
        value: 'CG',
        label: '采购费用'
      }, {
        value: 'RL',
        label: '人力总成本'
      }, {
        value: 'QT',
        label: '其他费用'
      }],

      // 表单验证规则
      moneyRules: {
        cost: [{ required: true, message: '请输入费用金额', trigger: 'blur' }],
        type: [{ required: true, message: '请选择费用类型', trigger: 'change' }],
        costCycle: [{ required: true, message: '请选择费用周期', trigger: 'change' }]
      },
      // 项目基本信息
      proinfo: {}
    };
  },

  // 创建实例后执行
  created () {
    // 获取项目基本信息
    this.getProinfo();
    // 是否修改
    this.editCon();
  },

  methods: {

    // 获取项目信息
    getProinfo () {
      let project = JSON.parse(sessionStorage.getItem('project'));
      this.proinfo = project;
    },

    // 项目费用信息 提交
    onSubmit () {
      // 防止重复提交
      this.isSubmit = true;
      setTimeout(() => {
        this.isSubmit = false;
      }, 1000);

      // 收集请求数据
      let params = {
        proId: this.proinfo.id,
        // 费用金额
        cost: this.money.cost,
        // 费用类型Code
        typeCode: this.money.type[0],
        // 费用类型名称
        typeName: this.money.type[1],
        // 费用周期 - 开始时间
        beginTime: this.money.costCycle[0],
        // 费用周期 - 结束时间
        endTime: this.money.costCycle[1],
        // 备注说明
        note: this.money.note
      };

      this.$nextTick(() => {
        // 判断是否通过验证规则验证
        this.$refs['money'].validate(valid => {
          if (valid) {
            this.saveCon(params);
          }
        });
      });
    },

    // 保存 - 项目费用信息
    saveCon (params) {
      // 项目费用信息
      this.$http.raw('api/insertProCost', params).then(res => {
        let { code } = res;
        // 判断Code状态
        if (code === 0) {
          this.$message({
            message: '添加成功！',
            type: 'success'
          });
          // 初始化弹窗表单数据
          this.$refs['money'].resetFields();
          this.goBack();
        }
      }).catch(err => {
        if (err === undefined) {
          this.$message({
            message: '服务器响应异常！',
            type: 'error'
          });
          return false;
        }
      });
    },

    // 修改项目费用信息 - 表单初始值
    editCon () {
      let row = this.$route.query.datas;
      if (row) {
        this.money.id = row.id;
        this.money.cost = row.cost;
        this.money.type = row.typeName;
        this.money.note = row.note;
        this.money.costCycle = [row.beginTime, row.endTime];

        // 显示修改按钮
        this.isEdit = true;
      } else {
        return false;
      }
    },

    // 修改 - 项目费用信息
    onEdit () {
      // 防止重复提交
      this.isSubmit = true;
      setTimeout(() => {
        this.isSubmit = false;
      }, 1000);

      // 收集请求数据
      let params = {
        id: this.money.id,
        proId: this.proinfo.id,
        // 费用金额
        cost: this.money.cost,
        // 费用类型Code
        typeCode: typeof (this.money.type) === 'string' ? this.$route.query.datas.typeCode : this.money.type[0],
        // 费用类型名称
        typeName: typeof (this.money.type) === 'string' ? this.$route.query.datas.typeName : this.money.type[1],
        // 费用周期 - 开始时间
        beginTime: this.money.costCycle[0],
        // 费用周期 - 结束时间
        endTime: this.money.costCycle[1],
        // 备注说明
        note: this.money.note
      };

      this.$nextTick(() => {
        // 判断是否通过验证规则验证
        this.$refs['money'].validate(valid => {
          if (valid) {
            this.updateCon(params);
          }
        });
      });
    },

    // 修改项目文档资料
    updateCon (params) {
      // 修改项目文档资料
      this.$http.raw('api/updateProCost', params).then(res => {
        let { code } = res;
        // 判断Code状态
        if (code === 0) {
          this.$message({
            message: '修改成功！',
            type: 'success'
          });
          // 初始化弹窗表单数据
          this.$refs['money'].resetFields();
          this.goBack();
        }
      }).catch(err => {
        if (err === undefined) {
          this.$message({
            message: '服务器响应异常！',
            type: 'error'
          });
          return false;
        }
      });
    },

    // 返回
    goBack () {
      this.$router.push({
        path: '/home/prolist/proinfo/'
      });
    }
  }
};
</script>

<style lang="scss" scoped>
@import './index.scss';
</style>
